<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="02.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{
				width: 80%;
				margin: 20px auto;
			}
			h2{
				text-align: center;
			}
			.bottom{
				background: #DDDDDD;
			}
			.shoop{
				padding: 10px;
				display: flex;
				justify-content: space-around;
			}
			
			.shoop div:hover button{
				display: inline-block;
			}
			.shoop div:hover span{
				display: none;
			}
			.shoop div{
				height: 350px;
				text-align: center;
				background: white;
			}
			.shoop h6{
				color: orange;
			}
			.shoop span{
				color: #dfdfdf;
			}
			.shoop div button{
				width: 100px;
				height: 24px;
				color: white;
				border: none;
				display: none;
				background: orange;
			}
			table{
				width: 100%;
				text-align: center;
				margin-bottom: 10px;
			}
			table td>img{
				width: 20%;
				height: 20%;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<table border="1" cellspacing="0" cellpadding="0">
					<thead>
						<tr>
							<th>
								<input type="checkbox" name="" id="quanxuan" value="" onclick="quanXuan()"/>全选
							</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
							<th>时间</th>
						</tr>
					</thead>
					<tbody>
						<!--<tr>
							<td><input type="checkbox" name="" id="" value="" class="checks"/></td>
							<td>
								<img src="img/Bi.png"/>小米巨能写中性笔
							</td>
							<td>39元</td>
							<td>
								<button type="button" onclick="jian()">-</button>
								<input type="number" name="" id="" value="" />
								<button type="button" onclick="jia()">+</button>
							</td>
							<td>39元</td>
							<td>
								<button type="button" onclick="delFun()">x</button>
							</td>
							<td>
								啊
							</td>
						</tr>-->
					</tbody>
				</table>
			</div>
			<div class="center">
				合计：<span id="zongjia">0元</span>
			</div>
			<div class="bottom">
				<h2>买购物车中的商品的人还买了</h2>
				<div class="shoop">
					<div>
						<img src="img/ErJi.png"/>
						<p>无线蓝牙耳机</p>
						<h6>99元</h6>
						<span>4.3万人好评</span>
						<button style="display: none;">加入购物车</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var shoop = document.querySelector('.shoop')
		var tbody = document.querySelector('tbody')
		var zongJia = document.getElementById('zongjia')
		var arrShoop = JSON.parse(localStorage.obj20191112).arr
		var arr
		if (localStorage.arr) {
			arr = JSON.parse(localStorage.arr)
			showFun()
		} else{
			arr = []
		}
		showShoopFun(arrShoop)
		function showShoopFun (arr) {
			var str = ''
			for (var i=0; i<arr.length; i++) {
				str += `<div>
						<img src="img/${arr[i].img}"/>
						<p>${arr[i].goodsName}</p>
						<h6>${arr[i].price}元</h6>
						<span>${arr[i].goodsRatings}</span>
						<button onclick="addFun(${i},'${arr[i].goodsName}','${arr[i].img}','${arr[i].price}')">加入购物车</button>
					</div>`
			}
			shoop.innerHTML = str
		}
		
		function addFun (id,name,imgSrc,price) {
			var obj = {
				id:id,
				name:name,
				src:imgSrc,
				price:price,
				count:1,
				sum:price,
				time:getTime()
			}
			for (var i=0; i<arr.length; i++) {
				if (id == arr[i].id) {
					jia(arr[i].id)
					return
				}
			}
			arr.push(obj)
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
		function showFun () {
			var str = ''
			for (let i=0; i<arr.length; i++) {
				str += `<tr>
							<td><input type="checkbox" name="" id="" value="" class="checks"/></td>
							<td>
								<img src="img/${arr[i].src}"/>${arr[i].name}
							</td>
							<td>${arr[i].price}元</td>
							<td>
								<button type="button" onclick="jian(${arr[i].id})">-</button>
								<input type="number" name="" id="countIpt" value="${arr[i].count}" />
								<button type="button" onclick="jia(${arr[i].id})">+</button>
							</td>
							<td>${arr[i].sum}元</td>
							<td>
								<button type="button" onclick="delFun(${arr[i].id})">x</button>
							</td>
							<td>
								${arr[i].time}
							</td>
						</tr>`
			}
			tbody.innerHTML = str
			zongjia()
		}
		function zongjia () {
			var obj20191112 = JSON.parse(localStorage.obj20191112)
			var sum = 0
			for (let i=0; i<arr.length; i++) {
				sum += (arr[i].sum-0)
			}
			obj20191112.total = sum
			localStorage.obj20191112=JSON.stringify(obj20191112)
			zongJia.innerHTML = obj20191112.total
		}
		function jia (myid) {
			for (let i=0; i<arr.length; i++) {
				if (myid == arr[i].id) {
					arr[i].count += 1
					arr[i].sum = arr[i].price * arr[i].count
				}
			}
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
		function jian (myid) {
			for (let i=0; i<arr.length; i++) {
				if (myid == arr[i].id) {
					if (arr[i].count<1) {
						arr[i].count = 0
					}else{
						arr[i].count -= 1
					}
					arr[i].sum = arr[i].price * arr[i].count
				}
			}
			localStorage.arr = JSON.stringify(arr)
			showFun()
		}
		function delFun (myid) {
			for (let i=0; i<arr.length; i++) {
				if (myid == arr[i].id) {
					arr.splice(i,1)
					localStorage.arr = JSON.stringify(arr)
					showFun()
				}
			}
		}
		
		function quanXuan () {
			var b = document.getElementById('quanxuan').checked
			var checks = document.querySelectorAll('.checks')
			for (let i=0; i<checks.length; i++) {
				checks[i].checked = b
			}
		}
		function getTime () {
			var d = new Date() 
			var h = d.getHours()
			var m = d.getMinutes()
			var s = d.getSeconds()
			h = h<10 ? '0'+h : h
			m = m<10 ? '0'+m : m
			s = s<10 ? '0'+s : s
			return h+':'+m+':'+s
		}
	</script>
</html>
